<template>
  <div class="container">
    <div class="form">
      <h1 class="title">Login</h1>
      <el-input class="input" v-model="account" size="medium" placeholder="账号、邮箱、手机号">
        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
      </el-input>
      <el-input
        class="input"
        v-model="password"
        placeholder="密码"
        size="medium"
        show-password
        @keyup.enter.native="login"
      >
        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
      </el-input>
      <el-button class="btn" type="primary" size="medium" @click="login" :loading="btnLoading">登录</el-button>
      <el-link class="forget-password" :underline="false">忘记密码</el-link>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { saveAuthInfo } from '../../common/js/cache'
import AuthService from '../../service/auth'
import UserService from '../../service/user'
import { loadingType } from '../../common/js/constant'

export default {
  data() {
    return {
      account: '',
      password: ''
    }
  },
  methods: {
    // 登录
    login() {
      if (this.account && this.password) {
        // 获取 Auth 信息
        const result = AuthService.getToken(this.account, this.password)
          .then(res => {
            // 存储 Auth 信息
            saveAuthInfo(res.data)
            // 获取 User 信息
            return UserService.getUserInfo()
          })
          .then(res => {
            // 消息通知
            this.$notify({
              title: '欢迎',
              message: `${res.data.userName}，欢迎回来`,
              type: 'success'
            })
            // 存储用户信息
            this.updateUserInfo(res.data)
            // 路由跳转
            this.$router.replace('/index/dashboard')
          })

        this.loadingAspect(result, loadingType.BUTTON)
      } else {
        this.$message.warning('账号或密码不能为空')
      }
    },
    ...mapActions(['updateUserInfo'])
  }
}
</script>

<style lang="stylus" scoped>
.container
  width inherit
  height inherit
  background #2d3a4b
  .form
    width 520px
    position absolute
    top 30%
    left 50%
    transform translate(-50%, -30%)
    padding 0 35px
    box-sizing border-box
    .title
      color #ffffff
      font-size 40px
      padding 13px 0
      text-align center
    .input
      margin-top 20px
      >>> .el-input__inner
        height 47px
        border 1px solid hsla(0, 0%, 100%, 0.1)
        background rgba(0, 0, 0, 0.1)
        padding-left 40px
        color #fff
      >>> .el-input__icon
        font-size 18px
    .btn
      width 100%
      margin-top 20px
      font-size 14px
      padding 10px 20px
    .forget-password
      margin-top 10px
      color #fff
      font-size 13px
      float right
</style>
